<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>费用管理</title>
<jsp:include page="../../views/layout/inc.jsp"></jsp:include>
<script type="text/javascript">
	var dataGrid;
	$(function() {
		$('#searchForm table').show();
		// 门牌号
		var numBox = $('#num').combobox({
			onSelect : function(a) {
				dataGrid.datagrid({
					url : '/propertyMoneyController/dataGrid?numId=' + a.value
				});
			}
		});
		// 单元选框
		var unitBox = $('#building-unitid').combobox(
				{
					onSelect : function(a) {
						numBox.combobox('clear');
						numBox.combobox('reload',
								'/houseDoorplatManager/combobox?buildingUnitId='
										+ a.value);
					}
				});
		var buildingBox = $('#parentId').combobox(
				{
					onSelect : function(a) {
						unitBox.combobox('clear');
						unitBox.combobox('reload',
								'/buildingUnitManager/combobox?parentId='
										+ a.value);
						$('#num').combobox('loadData', []);
						$('#num').combobox('clear');
					}
				});

		$('#residenceId').combobox(
				{
					onSelect : function(a) {
						buildingBox.combobox('reload',
								'/buildingManager/combobox?residenceId='
										+ a.value);
						$('#parentId').combobox('clear');
						$('#building-unitid').combobox('loadData', []);
						$('#building-unitid').combobox('clear');
						$('#num').combobox('loadData', []);
						$('#num').combobox('clear');
					},
					onLoadSuccess : function(e) {
						$('#residenceId').combobox('clear');
					}
				});

		dataGrid = $('#dataGrid').datagrid({
			fit : true,
			fitColumns : true,
			border : false,
			pagination : true,
			idField : 'id',
			pageSize : 10,
			pageList : [ 10, 20, 30, 40, 50 ],
			sortName : 'gmtCreate',
			sortOrder : 'desc',
			checkOnSelect : false,
			selectOnCheck : false,
			singleSelect : true,
			nowrap : false,
			frozenColumns : [ [ {
				field : 'id',
				title : '编号',
				width : 150,
				hidden : true,
				checkbox : true
			}, {
				field : 'num',
				title : '门牌号',
				width : 80
			} ] ],
			columns : [ [ {
				field : 'ownerName',
				title : '业主姓名',
				width : 60
			}, {
				field : 'ownerMobile',
				title : '业主手机号',
				width : 80
			}, {
				field : 'month',
				title : '月份',
				width : 80
			}, {
				field : 'space',
				title : '面积（平方米）',
				width : 80
			}, {
				field : 'amount',
				title : '费用（元）',
				width : 80,
				formatter:function(val,rec){ 
					return val/100;
				}
			}, {
				field : 'status',
				title : '状态',
				width : 80,
				formatter:function(val,rec){ 
					if(val == 1) {
						return '已交';
					}else if(val == 2) {
						return '未交';
					}
				}
			}, {
				field : 'gmtCreate',
				title : '创建时间',
				width : 150,
				sortable : true,
				formatter : function(val, rec) {
					var unixTimestamp = new Date(val);
					return unixTimestamp.format("yyyy-MM-dd hh:mm:ss");
				}
			}, {
				field : 'gmtModify',
				title : '更新时间',
				width : 150,
				sortable : true,
				formatter : function(val, rec) {
					var unixTimestamp = new Date(val);
					return unixTimestamp.format("yyyy-MM-dd hh:mm:ss");
				}
			} ] ],
			onLoadSuccess : function() {
				parent.$.messager.progress('close');
				$(this).datagrid('tooltip');
			},
			onRowContextMenu : function(e, rowIndex, rowData) {
				e.preventDefault();
				$(this).datagrid('unselectAll').datagrid('uncheckAll');
				$(this).datagrid('selectRow', rowIndex);
			}
		});
	});

	function doMoney() {
		var res = $('#residenceId').combobox('getValue');
		if (res) {
			$.messager.confirm('询问', '您是否要计算当前所选小区的物业费？', function(b) {
				if (b) {
					$.post('/propertyMoneyController/doMoney', {
						residenId : res
					}, function(result) {
						if (result.success) {
							dataGrid.datagrid('reload');
						}
						$.messager.alert('提示', result, 'info');
					}, 'JSON');
				}
			});
		} else {
			$.messager.alert('错误', '请选择需要计算物业费的小区！', 'error');
		}
	}
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit : true,border : false">
		<div data-options="region:'north',title:'查询条件',border:false"
			style="height: 140px; overflow: hidden;">
			<form id="searchForm">
				<table class="table table-hover table-condensed"
					style="display: none;">
					<tr>
						<td>小区名字</td>
						<td><select id="residenceId" name="residenceId" type="text"
							placeholder="小区名字"
							data-options="width:200,icons:[{
												iconCls:'icon-clear',
												handler: function(e){
													$(e.data.target).combobox('setValue','');
													$('#parentId').combobox('loadData',[]);
													$('#building-unitid').combobox('loadData',[]);
													$('#parentId').combobox('clear');
													$('#building-unitid').combobox('clear');
													$('#num').combobox('loadData',[]);
													$('#num').combobox('clear');
												}
											}]">
								<c:forEach items="${residences}" var="r">
									<option value="${r.id}">${r.name}</option>
								</c:forEach>
						</select>&nbsp;&nbsp;<span>
							<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="doMoney();">计算物业费</a>
						</span></td>
					</tr>
					<tr>
						<td>楼栋名称</td>
						<td><select name="parentId" id="parentId" type="text"
							placeholder="楼栋名称" class="easyui-combobox"
							data-options="width:200,icons:[{
												iconCls:'icon-clear',
												handler: function(e){
													$(e.data.target).combobox('setValue','');
													$('#building-unitid').combobox('loadData',[]);
													$('#building-unitid').combobox('clear');
													$('#num').combobox('loadData',[]);
													$('#num').combobox('clear');
												}
											}]">
								<c:forEach items="${building}" var="b">
									<option value="${b.id}">${b.name}</option>
								</c:forEach>
						</select></td>
					</tr>
					<tr>
						<td>单元名称</td>
						<td><input name="buildingId" id="building-unitid"
							placeholder="单元名称" class="easyui-combobox"
							data-options="width:200,valueField:'value',textField:'text',icons:[{
													iconCls:'icon-clear',
													handler: function(e){
														$(e.data.target).combobox('setValue','');
														$('#num').combobox('loadData',[]);
														$('#num').combobox('clear');
													}
												}]">
						</td>
					</tr>
					<tr>
						<td>门牌号</td>
						<td><input name="num" id="num" placeholder="门牌号"
							class="easyui-combobox"
							data-options="width:200,valueField:'value',textField:'text',icons:[{
													iconCls:'icon-clear',
													handler: function(e){
														$(e.data.target).combobox('setValue','');
													}
												}]">
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div data-options="region:'center',border:false">
			<table id="dataGrid"></table>
		</div>
	</div>
</body>
</html>